<script lang="ts" setup>
import { PeaceColumn } from '@/components/type/PeaceColumn'
import { ref } from 'vue'
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface'
import { ArrayUtil } from '@/util/ArrayUtil'
import FilterInput from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterInput/index.vue'
import FilterCascader from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterCascader/index.vue'
import FilterDate from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterDate/index.vue'
import FilterNumber from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterNumber/index.vue'
import FilterPeaceRender from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterPeaceRender/index.vue'
import FilterRadio from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterRadio/index.vue'
import FilterSelect from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterSelect/index.vue'
import FilterTimePicker from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterTimePicker/index.vue'
import FilterCascaderMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterCascaderMultiple/index.vue'
import FilterDateMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterDateMultiple/index.vue'
import FilterInputMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterInputMultiple/index.vue'
import FilterNumberMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterNumberMultiple/index.vue'
import FilterPeaceRenderMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterPeaceRenderMultiple/index.vue'
import FilterRadioMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterRadioMultiple/index.vue'
import FilterSelectMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterSelectMultiple/index.vue'
import FilterTimePickerMultiple from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterTimePickerMultiple/index.vue'
import FilterTreeSelect from '@/infrastructure/PeaceDataTable/component/TableFilter/component/FilterTreeSelect/index.vue'
import {SearchCircle,Bicycle,BicycleOutline,Body,VolumeOff,Umbrella,Triangle,SyncOutline,SwapVertical} from '@vicons/ionicons5'
import { ObjectUtil } from '@/util/ObjectUtil'

const props = withDefaults(
  defineProps<{
    peaceColumns: Array<PeaceColumn>
  }>(),
  {
    show: false,
  },
)
const emit = defineEmits<{
  (e: 'search', value: Record<string, unknown>): void
}>()
const showAllFilters = ref<boolean>(false)
const filteredPeaceColumns = computed(() => {
  const filterColumn = props.peaceColumns?.filter((column) => column.filterConfig?.peaceFilterable)
  if (!filterColumn) {
    return []
  }
  if (filterColumn.length > 3) {
    return showAllFilters.value ? filterColumn : filterColumn.slice(0, 3)
  }
  return filterColumn
})
const model = ref<Record<string, unknown>>({})
const filterModel: Record<string, unknown> = computed({
  get:()=> {
    if (ObjectUtil.isNotEmpty(model)){
      return model.value
    }
    const filterModel: Record<string, unknown> = {}
    for (const ele of filteredPeaceColumns.value) {
      const peaceItem = ele as PeaceColumn
      if (peaceItem.filterConfig) {
        if (peaceItem.filterConfig.key) {
          filterModel[peaceItem.filterConfig.key] = null
        }
        if (peaceItem.filterConfig.repeatRender?.fieldNames){
          peaceItem.filterConfig.repeatRender.fieldNames.forEach((fieldName) => {
            filterModel[fieldName] = null
          })
        }
        if (peaceItem.filterConfig.repeatRender?.markFieldNames){
          peaceItem.filterConfig.repeatRender.markFieldNames.forEach((fieldName) => {
            filterModel[fieldName] = null
          })
        }
      }
    }
    model.value = filterModel
    return model.value
  },
  set:(value)=> {
    // console.log(value,"set")
    model.value = value
  }
})
const resetForm = () => {
  model.value = ObjectUtil.setAllPropertiesToNull(model.value)
}
</script>
<template>
  <template v-if="ArrayUtil.isNotEmpty(filteredPeaceColumns)">
    <n-flex>
    <template
      v-for="(peaceItem, index) in filteredPeaceColumns as PeaceColumn<InternalRowData>[]"
      :key="index"
    >
      <FilterInput :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterCascader :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterDate :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterNumber :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterRadio :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterSelect :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterTimePicker :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterPeaceRender :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterCascaderMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterDateMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterInputMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterNumberMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterRadioMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterSelectMultiple :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterTreeSelect :peace-item="peaceItem" :index="index" v-model:filter-model="filterModel" />
      <FilterTimePickerMultiple
        :peace-item="peaceItem"
        :index="index"
        v-model:filter-model="filterModel"
      />
      <FilterPeaceRenderMultiple
        :peace-item="peaceItem"
        :index="index"
        v-model:filter-model="filterModel"
      />
    </template>
      <n-flex items-end>
        <n-button type="info">
          <template #icon>
            <n-icon>
              <SearchCircle />
            </n-icon>
          </template>
          查询
        </n-button>
        <n-button @click="resetForm">
          <template #icon>
            <n-icon>
              <SyncOutline />
            </n-icon>
          </template>
          重置</n-button>
        <n-button quaternary type="info" @click="showAllFilters = !showAllFilters">
          <template #icon>
            <n-icon>
              <SwapVertical />
            </n-icon>
          </template>
          {{showAllFilters?"收起":"展开"}}</n-button>
      </n-flex>
    </n-flex>
  </template>
</template>
<style scoped></style>
